<template>
  <div>
    <van-search v-model="value" placeholder="搜索商品, 共120149款好物" />
    <div class="catewrap">
      <div class="catewrap-left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="cate in cates"
            :key="cate.id"
            :title="cate.name"
          />
        </van-sidebar>
      </div>
      <div class="catewrap-right">
        <div class="items">
          <van-card
            v-for="item in items"
            :key="item.id"
            :price="item.originalPrice"
            :desc="item.characteristic ? item.characteristic : '暂无描述'"
            :title="item.name"
            :thumb="item.pic"
            @click="ClickItem(item.id)"
          >
          </van-card>
          <van-empty
          v-show="!items.length"
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="靓仔这里啥都没有了"
          />
        </div>
      </div>
    </div>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar.vue'
import { fetchCates, fetchItems } from '_api'
export default {
  name: 'Cate',
  data () {
    return {
      value: '',
      activeKey: 0,
      num: 0,
      cates: [],
      items: []
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    onChange (index) {
      this.num = index
      this.fetchItems()
    },
    ClickItem (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    fetchItems () {
      this.items = []
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems()
        }
      })
    }
  },
  components: {
    Tabbar
  }
}
</script>

<style lang="scss" scoped>
.custom-image{
  margin-top: 80px;
}
.van-search__content {
  background-color: #ededed;
  .van-cell--borderless {
    padding-left: 80px;
    color: #66667c;
  }
}
.van-card__title {
  line-height: 35px;
  font-size: 16px;
}
.van-ellipsis {
  font-size: 14px;
}
.van-card__bottom {
  .van-card__price {
    color: #dd1a21;
  }
}
.van-card__content {
  margin-left: 20px;
}
.van-sidebar-item--select::before {
  background-color: #ab2b2b;
  width: 2 px;
  height: 20 px;
}
.catewrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  display: flex;
  border-bottom: 2px solid #dddddd;
  .catewrap-left {
    position: fixed;
    padding: 46px 0;
  }
  .catewrap-right {
    overflow-y: auto;
    flex: 1;
    padding-left: 80px;
    margin-top: 52px;
  }
}
</style>
